<template>
    <div>
        <el-button type="primary" icon="el-icon-plus" @click="add">添加</el-button>
        <div style="margin-top:20px">
            <el-table :data="list" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column prop="tmName" label="品牌名称"></el-table-column>
                <el-table-column prop="logoUrl" label="品牌LOGO">
                    <template #default="{ row, $index }">
                        <img :src="row.logoUrl" width="70px" height="70px">
                    </template>
                </el-table-column>
                <el-table-column prop="l" label="操作">
                    <template #default="{ row, $index }">
                        <el-button type="warning" icon="el-icon-edit" size="mini" @click="amend(row, $index)">修改
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTd(row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加对话框 -->
            <el-dialog :title="tmForm.id ? `修改品牌` : `添加品牌`" :visible.sync="dialogFormVisible">

                <el-form :model="tmForm" :rules="rules" ref="ruleForm" style="width: 90%" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="品牌名称" prop="tmName">
                        <el-input v-model="tmForm.tmName"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌LOGO" prop="logoUrl">
                        <el-upload class="avatar-uploader" :action="`${$BASE_API}/admin/product/fileUpload`"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </el-form>

                <template #footer>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="affirm">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <!-- 分页 -->
        <div style="margin-top:20px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-size="limit" :page-sizes="[5, 10, 15]" :total="total" :pager-count="7"
                layout=" prev, pager, next, jumper, ->, sizes,total">
            </el-pagination>
        </div>
    </div>


</template>

<script>

import cloneDeep from 'lodash/cloneDeep'
export default {
    components: {},
    data() {
        return {
            dialogFormVisible: false,
            page: 1,
            limit: 3,
            total: 0,
            list: [],
            name: '',
            tmForm: {
                tmName: '',
                logoUrl: '',
            }, //收集表单字段
            // 验证表单信息
            rules: {
                tmName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                logoUrl: [
                    { required: true, message: 'LOGO必须指定' }
                ]
            },
            // 照片相关
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    computed: {},
    mounted() {
        this.getTrademarkList()
    },
    methods: {
        async getTrademarkList() {
            try {
                const { page, limit } = this
                let result = await this.$API.trademark.reqTrademackList(page, limit)
                this.list = result.data.records
                this.total = result.data.total
                // console.log(result)
            } catch (error) {
                console.error(error)
            }
        },

        // 添加按钮
        add() {
            this.dialogFormVisible = true
            // 清除数据
            this.tmForm = { tmName: '', logoUrl: '' }

        },
        // 确认按钮
        affirm() {
            // 校验
            this.$refs.ruleForm.validate(async (success) => {
                // console.log(success)
                if (success) {
                    try {
                        this.dialogFormVisible = false
                        if (!this.tmForm.id) {

                            let result = await this.$API.trademark.add(this.tmForm)
                        } else {
                            let result = await this.$API.trademark.update(this.tmForm)

                        }
                        this.$message({
                            message: this.tmForm.id ? '修改品牌成功' : '添加品牌成功',
                            type: 'success'
                        }
                        )
                        this.getTrademarkList()
                    } catch (error) {
                        console.error(error)
                    }
                }
            })

        },
        // 修改
        amend(row, $index) {
            this.dialogFormVisible = true
            this.tmForm = cloneDeep(row)

        },
        // 删除
        deleteTd(row) {
            this.$confirm(`你确定删除${row.tmName}吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let result = await this.$API.trademark.remove(row.id)
                console.log(result)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getTrademarkList(this.list.length > 1 ? this.page : this.page - 1)
            }).catch((error) => {
                if (error === 'canel') {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                }

            });
        },
        // // 分页
        handleSizeChange(limit) {
            // console.log(limit)
            this.limit = limit
            this.getTrademarkList()
        },
        handleCurrentChange(page) {
            this.page = page
            this.getTrademarkList()
        },
        // 照片相关
        handleAvatarSuccess(res, file) {
            // console.log(res)  
            // console.log(file)  
            this.tmForm.logoUrl = res.data
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },


}





</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>